import {  List, Button,  Space ,message, Popconfirm } from 'antd';
import { LikeOutlined, PieChartOutlined, StarOutlined } from '@ant-design/icons';
import React from 'react';
import { getCommodity ,getAddCart} from '@/api/shopping';
import { useEffect, useState } from 'react';
import { useSize} from 'ahooks'
import store from 'store2'
import Modal from './Notification'
import { useSelector , useDispatch } from "react-redux";
import { setTabulation,setAxiosCondition } from '@/store/shopping/Tabulation'

const IconText = ({ icon, text }) => (
  <Space style={{color:icon===LikeOutlined?'red':'#999'}}>
    {React.createElement(icon)}
    <span>{text}</span>
  </Space>
);

function Tabulation() {
  const dispatch = useDispatch();
  const tabulation = useSelector((state) => state.Tabulation.tabulation);
  const axiosCondition = useSelector((state) => state.Tabulation.axiosCondition);

  const [data, setData] = useState(axiosCondition);
  const [show,setShow] = useState(false)
  useEffect(() => {
    axios()
  }, [data]);
  const axios = () => {
    getCommodity(axiosCondition).then((res) => {
      dispatch(setTabulation(res.data))
    });
  }
  const bodySize = useSize(document.querySelector('body'))
  const defaultHeight = document.body.offsetHeight
  const close = () => {setShow(false)}
  const onSearch = (value) => {
    setData({
      ...data,
      current:1
    })
  }

  function confirm (e) {
    getAddCart({id:1,goodsId:e}).then((res) => {
      message.success('添加成功');
    })
  };
  function cancel (e) {
    message.error('取消成功');
  };
  return (
    <div style={{
      height:(bodySize?bodySize.height:defaultHeight)-200,
      overflow:'auto',
      position:'relative'
    }}>
      <Space style={{  position: 'fixed',top: 140,zIndex: '+2'}}>
        <Button type="primary" onClick={()=>setShow(true)}>
          查找
        </Button>
      </Space>
      <List
      itemLayout="vertical"
      size="large"
      pagination={{
        onChange: (page,pagesize) => {
          store.set('tabulationPagesize',pagesize)
          store.set('tabulationCurrent',page)
          dispatch(setAxiosCondition({current:page,pagesize:pagesize,}))
          setData({
            ...data,
            current:page,
            pagesize:pagesize,
          })
        },
        total: tabulation.total*data.pagesize || 0,
        pageSizeOptions: [4, 8, 12],
        defaultPageSize: data.pagesize,
        showQuickJumper: true,
        // showTotal: () => `共 ${tabulation.total} 条`,
        position:'top',
        defaultCurrent: data.current,
      }}
      dataSource={tabulation.list}
      renderItem={(item) => (
        <Popconfirm
          title="是否添加购物车"
          onConfirm={()=>{confirm(item.goods_id)}}
          onCancel={()=>{cancel()}}
          okText="添加"
          cancelText="取消"
        >
        <List.Item
          key={item.title}
          actions={[
            <IconText icon={StarOutlined} text={`原价${item.price}`} key="list-vertical-star-o" />,
            <IconText icon={LikeOutlined} text={`折扣价${item.current_price}！`} key="list-vertical-like-o" />,
            <IconText icon={PieChartOutlined} text={`剩余库存${item.goods_number}`} key="list-vertical-like-o" />,
          ]}
          extra={
            <img
              width={72}
              alt="logo"
              src={item.img_big_logo}
            />
          }
        >
          <List.Item.Meta
            title={<a href={item.href}>{item.title}</a>}
          />
            {item.content}
          </List.Item>
        </Popconfirm>
      )}
    />
        {
          show && <Modal  close={close} onSearch={onSearch}/>
        }
    </div>
  )
}
export default Tabulation